<template>
  <el-switch
    v-model.trim="currentValue"
    :disabled="$attrs.disabled || false"
    :width="$attrs.width || 40"
    :active-icon-class="$attrs.activeIconClass"
    :inactive-icon-class="$attrs.inactiveIconClass"
    :active-text="$attrs.activeText"
    :inactive-text="$attrs.inactiveText"
    :active-value="$attrs.activeValue"
    :inactive-value="$attrs.inactiveValue"
    :active-color="$attrs.activeColor || '#409EFF'"
    :inactive-color="$attrs.inactiveColor || '#C0CCDA'"
    :name="$attrs.name"
    :validate-event="$attrs.validateEvent || true"
    @input="handleInputEvent"
  ></el-switch>
</template>

<script>
export default {
  name: "YSwitch",
  props: {
    value: {
      type: [String, Boolean, Number],
      default: "",
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  watch: {
    value: {
      handler(val) {
        this.currentValue = val;
      },
      deep: true,
    },
  },
  methods: {
    handleInputEvent(value) {
      this.$emit("input", value);
    },
  },
};
</script>

<style lang="scss" scoped></style>
